<template>
  <div style="padding: 20px">
    <!--基础信息-->
    <el-card class="box-card2vvg">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <!-- 基础信息表单 -->
      <el-form ref="form" :model="form" label-width="120px" style="padding: 20px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备件编码">
              <el-input v-model="form.encode" placeholder="系统自动生成" disabled></el-input>
            </el-form-item>
            <el-form-item label="备件类型" required>
              <el-select v-model="form.type" placeholder="请选择" style="width: 456px;">
                <el-option v-for="item in leixing" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位">
              <el-input v-model="form.unit" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="品牌">
              <el-input v-model="form.brand" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="库存上限">
              <el-input v-model="form.inventoryLimit" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="更换周期">
              <el-input-number style="width: 366px" v-model="form.cycle" controls-position="right"
                @change="handleChange" :min="1" :max="10"></el-input-number>
              <el-select v-model="form.replacementUnit" placeholder="请选择" style="width: 80px; margin-left: 10px">
                <el-option label="天" value="天"></el-option>
                <el-option label="周" value="周"></el-option>
                <el-option label="月" value="月"></el-option>
                <el-option label="季" value="季"></el-option>
                <el-option label="年" value="年"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark" placeholder="请输备注"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="备件名称" required>
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="规格型号">
              <el-input v-model="form.specification" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="生产厂商">
              <el-input v-model="form.manufacturer" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="供应商">
              <el-select v-model="form.vendor" placeholder="请选择" style="width: 456px;">
                <el-option label="笑料百货" value="笑料百货"></el-option>
                <el-option label="欢乐采购" value="欢乐采购"></el-option>
                <el-option label="笑欢供货商" value="笑欢供货商"></el-option>
                <el-option label="趣味供货链" value="趣味供货链"></el-option>
                <el-option label="百事百货" value="百事百货"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="库存下限">
              <el-input v-model="form.inventoryMinimum" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="参考单价">
              <el-input v-model="form.indicativePrice" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!--设备明细-->
    <div>
      <el-card class="box-card2bn">
        <div slot="header" class="clearfix">
          <span>设备明细</span>
        </div>
        <div style="margin-bottom: 20px;">
          <el-button type="primary" @click="dialogVisible = true">添加</el-button>
          <el-button type="danger" @click="deleteSelected" style="margin-left: 10px;">移除</el-button>
        </div>
        <el-table ref="registTable" :data="tableData" stripe style="width: 100%;" :cell-style="{ padding: '0px' }"
          :row-style="{ height: '35px' }">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column label="序号" width="60" align="center" fixed>
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center" fixed>
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="removeRow(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="设备编号" width="120" align="center">
          </el-table-column>
          <el-table-column prop="name" label="设备名称" width="120" align="center">
          </el-table-column>
          <el-table-column prop="deviceType" label="设备类型" width="120" align="center">
          </el-table-column>
          <el-table-column prop="specifications" label="规格型号" width="120" align="center">
          </el-table-column>
          <el-table-column prop="brand" label="品牌" width="120" align="center">
          </el-table-column>
          <el-table-column prop="useDepartments" label="使用部门" width="120" align="center">
          </el-table-column>
          <el-table-column prop="storageLocation" label="存放位置" width="120" align="center">
          </el-table-column>
          <el-table-column prop="currentStatus" label="设备状态" width="120" align="center">
          </el-table-column>
          <el-table-column prop="deviceType" label="设备部位" width="120" align="center">
          </el-table-column>
          <el-table-column label="关联数量" width="150" align="center">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.actualPrice" :min="1" style="width: 120px"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.note" placeholder="请输入" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!--子设备选择框-->
      <el-dialog title="选择设备" :visible.sync="dialogVisible" width="60%">
        <div>
          <el-input placeholder="请输入设备编号/名称/规格型号" v-model="searchInput"
            style="width: 20%; margin-right: 10px"></el-input>
          <el-select placeholder="请选择设备类型" v-model="selectedType" style="width: 20%; margin-right: 10px">
            <el-option label="生产设备" value="生产设备"></el-option>
          </el-select>
          <el-select placeholder="请选择使用部门" v-model="selectedDepartment" style="width: 20%; margin-right: 10px">
            <el-option label="生产部门" value="生产部门"></el-option>
          </el-select>
          <el-button type="primary" @click="handleSearch2">查询</el-button>
          <el-button @click="handleReset2">重置</el-button>
        </div>
        <el-table ref="myTable" size="mini" :cell-style="{ padding: '0px' }" :row-style="{ height: '35px' }"
          :data="filteredData" style="width: 100%; margin-top: 20px" stripe @selection-change="handleSelectionChange23">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="eid" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="code" label="设备编号" width="170" align="center"></el-table-column>
          <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
          <el-table-column prop="specifications" label="规格型号" align="center"></el-table-column>
          <el-table-column prop="deviceType" label="设备类型" align="center"></el-table-column>
          <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
          <el-table-column prop="useDepartments" label="使用部门" align="center"></el-table-column>
          <el-table-column prop="storageLocation" label="存放位置" align="center"></el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next, sizes, total" :total="total" :page-size.sync="pageSize"
          :current-page.sync="currentPage" @size-change="handlePageChange23" @current-change="handlePageChange2"
          style="margin-top: 20px" />

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm2">确认</el-button>
        </div>
      </el-dialog>

      <!--初期库存-->
      <el-card class="box-card3bn">
        <div slot="header" class="clearfix">
          <span>初期库存</span>
        </div>
        <el-button type="success" @click="addItem">添加</el-button>
        <el-button type="danger" @click="removeItem">移除</el-button>
        <el-table :data="items" stripe style="width: 100%;">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="index" label="序号" align="center" width="50">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="moveItem(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
          <el-table-column label="仓库名称" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.name" placeholder="请选择" style="width: 140px;">
                <el-option label="仓库1" value="仓库1"></el-option>
                <el-option label="仓库2" value="仓库2"></el-option>
                <el-option label="仓库3" value="仓库3"></el-option>
                <!-- <el-option v-for="item in leixing" :key="item.id" :label="item.name" :value="item.name"></el-option> -->
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="cost" label="期初成本" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cost" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="期初库存数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.quantity" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="zo" label="期初总金额" align="center">
            <template slot-scope="scope">
              {{ scope.row.cost * scope.row.quantity }}
            </template>
          </el-table-column>
          <el-table-column prop="storageLocation" label="存放位置" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.storageLocation" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="备注" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.notes" placeholder="请输入" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!--设备图片-->
      <el-card class="box-card4bn">
        <div slot="header" class="clearfix">
          <span>设备图片</span>
        </div>
        <p>最多上传10张图片</p>
        <el-upload ref="upload" action="http://localhost:9289/maintenance/upload" list-type="picture-card"
          :auto-upload="true" :on-success="handleUploadSuccess27" :on-remove="handleRemovegg" :limit="10"
          :file-list="fileList2">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible2">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-card>

      <!--关联文件-->
      <el-card class="box-card5bn">
        <div slot="header" class="clearfix">
          <span>关联文件</span>
        </div>
        <el-button-group style="margin-bottom: 20px;">
          <el-upload ref="upload2" action="http://localhost:9289/maintenance/upload2" :on-success="handleUploadSuccess2"
            :file-list="fileList" :auto-upload="true" :show-file-list="false" :before-upload="beforeUpload">
            <el-button type="primary">上传文档</el-button>
          </el-upload>
          <el-button @click="removeSelectedRows2">移除</el-button>
        </el-button-group>
        <el-table :data="documents" style="width: 100%;" border @selection-change="handleSelectionChange2">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="name" label="文件名"></el-table-column>
          <el-table-column prop="uploadDate" label="上传时间"></el-table-column>
          <el-table-column prop="uploader" label="上传者"></el-table-column>
          <el-table-column prop="size" label="文档大小"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="removeRow3(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div style="height: 120px;">
      <el-footer class="footer">
        <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px;">关闭</el-button>
        <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px;">确认</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
import { listType } from "@/api/eastjet-maintenance/type/type";
import { listEquipment, listEquipment2 } from "@/api/eastjet-maintenance/sb/sb";
import { InsertLedger } from "@/api/eastjet-maintenance/tai/tai";
export default {
  data() {
    return {
      form: {
        id: "",
        encode: "",
        name: "",
        type: "",
        specification: "",
        unit: "",
        manufacturer: "",
        brand: "",
        vendor: "",
        inventoryLimit: "",
        inventoryMinimum: "",
        cycle: "",
        indicativePrice: "",
        remark: "",
        tombstone: "",
        replacementUnit: "天",
        usname: this.$store.state.user.name,
        //选择关联设备数据
        tableData: [],
        documents: [],
        fileList2: [],
        //初期库存
        items: []
      },
      filteredData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      tableData: [],
      //初期库存存储
      items: [
      ],
      //关联文件上传
      documents: [],
      fileList: [],
      multipleSelection: [],
      //照片上传相关
      dialogImageUrl: "",
      dialogVisible2: false,
      disabled: false,
      fileList2: [],
      leixing: [],
      name: "",
    };
  },
  created() {
    this.getlist()
  },
  methods: {
    //初始化方法
    getlist() {
      listType().then((res) => {
        console.log("数据", res.data.data);
        this.leixing = res.data.data;
      });
      listEquipment("", this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    //子设备选择分页`
    handlePageChange2(page) {
      this.currentPage = page;
      listEquipment2(this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
      });
    },
    //子设备选择分页
    handlePageChange23(size) {
      this.pageSize = size;
      listEquipment2(this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
      });
    },
    //选择子设备确认
    handleConfirm2() {
      let selected = this.$refs.myTable.selection;
      if (this.tableData.length == 0) {
        for (let i = 0; i < selected.length; i++) {
          this.tableData.push({ ...selected[i], "actualPrice": "1", "note": "" })
        }
        console.log('数据ss', this.tableData);
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          for (let j = 0; j < selected.length; j++) {
            if (this.tableData[i].eid != selected[j].eid) {

            } else {
              this.tableData[i].actualPrice += 1
              selected.splice(j, 1);
            }
          }
        }
        for (let i = 0; i < selected.length; i++) {
          this.tableData.push({ ...selected[i], "actualPrice": "1", "note": "" })
        }
      }
      this.$refs.myTable.clearSelection();
      this.dialogVisible = false;
    },
    //移除
    deleteSelected() {

    },
    //取消返回
    handleCancel() {
      this.$router.go(-1);
    },

    //确认提交
    handleConfirm() {
      this.form.tableData = this.tableData
      this.form.documents = this.documents
      this.form.fileList2 = this.fileList2
      this.form.items = this.items
      InsertLedger(this.form).then(res => {
        if (parseInt(res.data.code) == 520) {
          this.$router.go(-1)
        } else {
          this.$notify.error({
            title: '错误',
            message: '这是一条错误的提示消息'
          });
        }
      })
      console.log("提交数据", this.form)
    },
    //文件上传大小判断
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isLt10M;
    },
    //关联文件上传
    removeRow3(index) {
      this.documents.splice(index, 1);
    },
    handleSelectionChange2(val) {
      this.multipleSelection = val;
    },
    removeSelectedRows2() {
      this.documents = this.documents.filter(
        (item) => !this.multipleSelection.includes(item)
      );
    },
    //照片上传成功时候
    handleUploadSuccess27(response, file, fileList) {
      this.fileList2 = fileList
      console.log("数据1", this.fileList2);
    },
    //照片删除
    handleRemovegg(file, fileList) {
      this.fileList2 = fileList
      console.log("数据2", this.fileList2);
    },
    //文件上传成功时候
    handleUploadSuccess2(response, file, fileList) {
      this.documents.push({
        name: file.name,
        url: file.url,
        uploadDate: new Date().toLocaleDateString('zh').replaceAll('/', '-'),
        uploader: this.$store.state.user.name,
        size: file.size + " KB",
      });
      console.log("数据2", this.documents);
    },
    //初期库存方法
    addItem() {
      const index = this.items.length + 1;
      this.items.push({ index, name: '', cost: '', quantity: '', zo: '', storageLocation: '', notes: '' });
    },
    moveItem(index) {
      this.items.splice(index, 1);
    },
    removeItem() {
      this.items.pop();
    },
    //
    handleChange(value) {
      console.log(value);
    },

  },
};
</script>

<style scoped>
.fixed-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  text-align: center;
  background-color: #eeeded;
  position: fixed;
  bottom: 0;
  z-index: 12;
  width: 100%;
}

.box-card2vvg {
  width: 1254px;
  margin-top: 20px;
  margin-left: 10px;
}

.box-card2bn {
  width: 1254px;
  margin-top: 20px;
  margin-left: 10px;
}

.box-card3bn {
  width: 1254px;
  margin-top: 20px;
  margin-left: 10px;
}

.box-card4bn {
  width: 1254px;
  margin-top: 20px;
  margin-left: 10px;
}

.box-card5bn {
  width: 1254px;
  margin-top: 20px;
  margin-left: 10px;
}
</style>
